<template>
	<div class="login-box containregi">
		<!-- <div style="width: 100%; height: 800px; background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2028827871,514591976&fm=26&gp=0.jpg');"> -->

		<h1 class="titleregi">欢迎注册</h1>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" style=" padding: 30px;">
			<el-form-item label="邮箱" prop='useremail'>
				<el-input v-model="ruleForm.useremail" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="用户名" prop="username">
				<el-input v-model="ruleForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
			</el-form-item>


			<el-form-item label="确认密码" prop="checkPass">
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="auth">
				<el-input v-model="ruleForm.auth"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm" style="margin-left: 30px;">提交</el-button>
				<el-button @click='authcode(ruleForm.useremail)' style="margin-left: 90px;">获取验证码</el-button>
			</el-form-item>
		</el-form>

		<!-- </div> -->
	</div>
</template>

<script>
	import "assets/css/css/reset.css"
	import "assets/css/css/login.css"
	import {
		sendauth
	} from '@/api/tools.js'
	export default {
		name: "register",
		data() {
			var validateEmail = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入邮箱'));
				}
				
				var par = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				var ret = par.test(value)
				if (!ret) {
					callback(new Error('请输入正确的邮箱'));
				}else{
					this.authemail = true;
				}
			};
			var validateName = (rule, value, callback) => {
				
				if (value === '') {
					callback(new Error('请输入用户名'));
				}
				
				var par = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
				var ret = par.test(value)
				if (!ret) {
					callback(new Error('用户名需为中文、数字、字母、下划线组成'));
				}else{
						this.authname = true;
				}
				// else {

				// 	}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					var par = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/
					var ret = par.test(value)
					if (!ret) {
						callback(new Error('密码至少8个字符，至少1个字母，1个数字和1个特殊字符'));
					}else{
						this.authpass = true;
					}
					
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
				
				
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				authname: false,
				authemail: false,
				authpass: false,
				authrecv: '',
				ruleForm: {
					username: '',
					useremail: '',
					pass: '',
					checkPass: '',
					auth: ''
				},
				rules: {
					useremail: [{
						validator: validateEmail,
						trigger: 'blur'
					}],
					username: [{
						validator: validateName,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			submitForm() {
				if (this.authrecv !== this.ruleForm.auth) {
					this.$message.error('验证码不正确');
				}
				if (this.authemail && this.authname && this.authpass)
				{
					this.$emit('on-success-valid', {
						email: this.ruleForm.useremail,
						userName: this.ruleForm.username,
						password: this.ruleForm.pass,
						auth: this.ruleForm.auth
					});
					this.$router.push({name:'login'})
				}
			},
			authcode(useremail) {
				// 调用loginapi
				if (this.authemail){
					sendauth(useremail).then(
						// 请求成功的处理方式
						res => {
							this.authrecv = res.data.data
							this.$message({
								message: '获取成功！',
								type: 'success'
							});
						},
						// 请求失败时的处理方法 => 可省
						res => {
							this.message = res
							this.$notify.error({
								title: '错误',
								message: '邮箱已存在!'
							});
				})
					
				
					}
				
				// catch 捕获同步异常 => 可省
			}
		}

	}
</script>
<style>
	.center1 {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -150px;
		margin-left: -200px;
		width: 500px;
	}

	.el-form-item__label {
		text-align: center;
	}

	.containregi {
		width: 40%;
		margin-top: 10%;
		text-align: center;
		height: 800px;
		margin-bottom: 10%;
	}

	.titleregi {
		font-size: 40px;
		text-align: center;
	}
</style>
